import React from "react";
import { List } from "antd-mobile";
import { Tabs, WhiteSpace } from "antd-mobile";

import { withRouter } from "react-router-dom";
import { http } from "@/utils/request/index.js";
import api from "@/utils/api.js";
import "./index.less";
const tabs = [
  { title: "预支记录", key: "1" },
  { title: "还款记录", key: "2" },
];

const statusBackMap = {
  "01": <span className="col-F2912C">处理中</span>,
  "00": <span className="col-8C8C8C">还款成功</span>,
  "99": <span className="col-FF8A72">还款失败</span>,
  "30": <span className="col-595959">还款待审核</span>,
};
const Item = List.Item;
class PreviewRecord extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lists: [],
      tabType: "1",
    };
  }

  componentWillMount() {
    this.getListByUserId();
  }
  // 获取预支记录
  getListByUserId() {
    http.post(api.getListByUserId).then((res) => {
      this.setState({
        lists: res.data,
      });
    });
  }
  // 获取还款记录
  getRepayList() {
    http.post(api.getRepayList).then((res) => {
      this.setState({
        lists: res.data,
      });
    });
  }
  tabChange = ({ key }) => {
    this.setState({
      tabType: key,
    });
    if (key === "1") {
      this.getListByUserId();
    } else if (key === "2") {
      this.getRepayList();
    }
  };

  // 判断类型
  checkStatusMap = (orderStatus, amount, amountEnd) => {
    if (orderStatus === "20") {
      return <span>申请中</span>;
    } else if (orderStatus === "00") {
      if (amount === amountEnd) {
        return <span className="col-8C8C8C">已还款</span>;
      } else {
        return <span className="col-F2912C">待还款</span>;
      }
    } else if (orderStatus === "30" && amount !== amountEnd) {
      return <span>还款待审核</span>;
    } else {
      return <span>申请中</span>;
    }
  };
  render() {
    return (
      <div>
        <div>
          <Tabs
            onChange={this.tabChange}
            tabs={tabs}
            initialPage={this.state.tabType}
            animated={false}
            useOnPan={false}
          ></Tabs>
          <WhiteSpace />
        </div>
        {this.state.tabType === "1" ? (
          <div className="">
            {this.state.lists.length ? (
              <List>
                {this.state.lists.map((item, index) => {
                  return (
                    <Item
                      key={index}
                      onClick={() => {
                        this.props.history.push(
                          "previewRecordDetail?id=" + item.id
                        );
                      }}
                      arrow="horizontal"
                      extra={this.checkStatusMap(
                        item.orderStatus,
                        item.amount,
                        item.amountEnd
                      )}
                    >
                      <div className="col-595959 ft-bold ft-16 line-height-2">
                        +{item.amount}
                        {item.overdueFlag == "1" ? (
                          <span
                            className="text-center ft-12"
                            style={{
                              marginLeft: "1em",
                              display: "inline-block",
                              width: "4em",
                              height: "1.5em",
                              borderRadius: "0.75em",
                              backgroundColor: "#FF8A72",
                              color: "#fff",
                              lineHeight: "1.5",
                            }}
                          >
                            逾期{item.day}
                          </span>
                        ) : (
                          ""
                        )}
                      </div>
                      <div className="col-8C8C8C">{item.createDate}</div>
                    </Item>
                  );
                })}
              </List>
            ) : (
              <div className="text-center" style={{ marginTop: "7rem" }}>
                <img
                  style={{ width: "3rem" }}
                  src={require("../../../images/mine/noRecord.png")}
                />
                <p className="ft-13 color-8C8C8C">暂无数据</p>
              </div>
            )}
          </div>
        ) : (
          <div>
            {this.state.lists.length ? (
              <List>
                {this.state.lists.map((item, index) => {
                  return (
                    <Item
                      key={index}
                      onClick={() => {
                        this.props.history.push(
                          "repaymentDetail?id=" + item.id
                        );
                      }}
                      arrow="horizontal"
                      extra={statusBackMap[item.status] || "申请中"}
                    >
                      <div className="col-595959 ft-bold ft-16">
                        +{item.amount}
                      </div>
                      <div className="col-8C8C8C">{item.createDate}</div>
                    </Item>
                  );
                })}
              </List>
            ) : (
              <div className="text-center" style={{ marginTop: "7rem" }}>
                <img
                  style={{ width: "3rem" }}
                  src={require("../../../images/mine/noRecord.png")}
                />
                <p className="ft-13 color-8C8C8C">暂无数据</p>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }
}

export default withRouter(PreviewRecord);
